<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { useLayoutStore } from '@/stores/useLayout';
import { getStyleNumber } from '@/comm/tooler';

const width = ref(1)
const height = ref(0)
const shadow = ref(false)
const padding = ref(0)
const gap = ref(0)

const background = ref(null)

const layoutStore = useLayoutStore()

watch(() => layoutStore.curItem, (item) => {
  console.log("change cur layout", item)
  updateData()
})

onMounted(() => {
  updateData()
})

const updateData = () => {
  console.log("onMounted cur layout", layoutStore.curItem)
  const style = layoutStore.curItem.style;
  if (style) {
    height.value = getStyleNumber(style.height, 0);
    width.value = getStyleNumber((style.flex + "").split(" ")[0], 1);
    padding.value = getStyleNumber(style.padding, 0);
    gap.value = getStyleNumber(style.gap, 0);
    shadow.value = style.boxShadow && style.boxShadow != 'none';
    background.value = style.background || 'none'
  }
}

const onWidth = (e: any) => {
  console.log(e, "e")
  layoutStore.changeStyle({
    flex: e + " 0 0"
  })
}

const onHeight = (e: any) => {
  console.log(e, "e")
  if (!e || e == 0) {
    layoutStore.changeStyle({ height: 'auto', flex: '1 0 0' })
  }
  else {
    layoutStore.changeStyle({
      height: e + 'px',
      flex: 'auto'
    })
  }

}
const onGap = (e: any) => {
  console.log(e, "e")
  layoutStore.changeStyle({
    gap: e + 'px',
  })
}

const onBackground = (e: any) => {
  console.log(e)
  layoutStore.changeStyle({ background: e })
}

const onShadow = (e: any) => {
  console.log(e)
  const s = `0px 4px 4px 0px rgba(0, 0, 0, 0.25)`;
  layoutStore.changeStyle({ boxShadow: e ? s : 'none' })
}

const onPadding = (e: any) => {
  console.log(e)
  layoutStore.changeStyle({ padding: e + "px" })
}
</script>
<template>
  <div class="tip">LAYOUT</div>
  <div class="slider-block">
    <span class="sname">WIDTH:</span>
    <el-slider class="bar" :min="1" :max="10" v-model="width" @input="onWidth" />
  </div>
  <div class="slider-block">
    <span class="sname">HEIGHT:</span>
    <el-input class="bar" v-model="height" @change="onHeight" />
  </div>
  <div class="slider-block">
    <span class="sname">GAP:</span>
    <el-input class="bar" v-model="gap" @change="onGap" />
  </div>
  <div class="slider-block">
    <span class="sname">SHADOW:</span>
    <el-switch v-model="shadow" class="ml-2" @change="onShadow" />
  </div>

  <div class="slider-block">
    <span class="sname">PADDING:</span>
    <el-input class="bar" v-model="padding" type="number" @change="onPadding" />
  </div>

  <div class="slider-block">
    <span class="sname">COLOR:</span>
    <el-color-picker v-model="background" @change="onBackground" />
  </div>
</template>

<style lang="less" scoped>
@import url("./base.less");
</style>